<html>

<head>
<title>005 文档处理</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//append（content|fn) 向每个匹配的元素内容追加内容
	//这个操作与指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
	$("p").append("<b>Hello</b>");

	//prepend(content) 向每个匹配的元素内部前置内容
	//这是向所有匹配元素内部的开始处插入内容的最佳方式。
	$("p").prepend("<b>Hey </b> ");


	//appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。
	//实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中，而是把A追加到B中。
	//在jQuery1.3.2中，appendTo,prependTo,insertBefore,insertAfter,和replaceAll这几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法。
	//content 用于被追加的内容
	$("p").appendTo("div"); // or $("p").prependTo("div");
	

	//insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素集合后面。
	//实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中，而是把A追加到B中。
	$("h1").insertAfter("#foo");
	//$("#foo").after("h1")
	//把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
	$("h1").insertBefore("#foo");

	//wrap(html|element|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来。
	//这种包装对于文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的)，并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数，因此，如果要添加文本应该在包裹完成之后再行添加。
	$("h1").wrap("<div class='wrap'></div>");
	$("p").wrap(document.getElementById('content'));


	//$("p").replaceWith("<b>Paragraph. </b>");
	//将所有匹配的元素替换成指定的HTML或DOM元素。
	$('.third').replaceWith($('.first'));

	//replaceAll()用匹配的元素替换掉所有 selector匹配到的元素。
	$("<b>Paragraph. </b>").replaceAll("p");

	//empty()删除匹配的元素集合中所有的子节点。
	$("b").empty();



});
</script>
	

</head>

<body>
<p>I would like to say: </p>
<div></div><div></div>
<h1>I would like to say123: </h1><div id="foo">Hello123</div>

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>

<p>Hello</p><p>cruel</p><p>World</p>


<div class="container">
  <div class="inner first">Hello22</div>
  <div class="inner second">And22</div>
  <div class="inner third">Goodbye33</div>
</div>



</body>

</html>
